<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    普通<input type="text" name="username">
    <!-- 自定义指令 -->
    自定义自动获取焦点并设置文字颜色指令：<input type="text" name="username2" v-focus="color">

    <!-- 自定义指令封装 加载中效果 -->
    <div class="content" v-loading="isLoading">
      {{ content }}
    </div>

    <!-- 插槽 -->
    <MySlot>
      <!-- <p>
        123
    </p> -->
  </MySlot>

  <MySlot>
    <template v-slot:slot1>
      999
    </template>
  </MySlot>

  <!-- 作用域插槽 -->
    <MySlot>
      <template  v-slot:slot1="obj">
        999
        {{ obj.key2 }}
      </template>
    </MySlot>
  </div>
</template>

<script>
import MySlot from './components/MySlot.vue'


export default {
  name: 'App',
  data() {
    return {
      color: 'red',
      content: '',
      isLoading: true
    }
  },
  components: {
    MySlot
  },
  directives: {
    'focus': {
      inserted(el, binding) {
        console.log(`创建... ${JSON.stringify(binding)}`);
        el.focus()
        el.style.color = binding.value
      },
      update(el, binding) {
        console.log(`更新...${JSON.stringify(binding)}`);
        el.focus()
        el.style.color = binding.value
      },
    },
    'loading': {
      inserted(el, binding) {
        binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      },
      update(el, binding) {
        binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      },
    }
  },
  created() {
    setTimeout(() => {
      this.content = '请求成功'
      this.isLoading = false
    }, 2000);
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.content {
  position: relative;
  width: 200px;
  height: 200px;
}
.loading::before{
  content: '请求中';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(133, 122, 122)
}
</style>
